<template>
    <div class="indexcontent">
        <pageHeader ref="header"></pageHeader>
        <div class="section option-section">
            <div class="section-main option-main">
                <div class="pagerouter">
                    <router-link tag="a" :to="{name:'index'}" class="pagerouter-item pagerouter-a">首页</router-link>
                    <span class="pagerouter-arrow">></span>
                    <router-link tag="a" :to="{name:'Ordercenter'}" class="pagerouter-item pagerouter-a">合同中心
                    </router-link>
                    <span class="pagerouter-arrow">></span>
                    <span class="pagerouter-item">Ukey授权</span>
                </div>
                <div class="option-wrap">
                    <div class="option-tl">
                        <div class="option-tlsm">Ukey签约授权</div>
                        <div class="step-wrap">
                            <div class="clearfix step">
                                <div class="step-item step-first" :class="[stepActive>0?'step-active':'']">
                                    <div class="step-num">1</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">操作身份确定</div>
                                </div>
                                <div class="step-item step-defaultitem" :class="[stepActive>1?'step-active':'']">
                                    <div class="step-num">2</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">Ukey绑定</div>
                                </div>
                                <div class="step-item step-defaultitem" :class="[stepActive>2?'step-active':'']">
                                    <div class="step-num">3</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">法人授权确认</div>
                                </div>
                                <div class="step-item step-last" :class="[stepActive>3?'step-active':'']">
                                    <div class="step-num">
                                        <img src="@/assets/images/u281.png" alt="" v-if="stepActive<=3">
                                        <img src="@/assets/images/u281_selected.png" alt="" v-else>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step-words">完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="option-bd">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <!-- slides -->
                            <!--<swiper-slide><img :src="bannerList[0].imgPath" alt="" style="width: 100%;display: block;">-->
                            <!--</swiper-slide>-->
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-navs">
                                    <div class="option-navs-item" @click="isLegal = true" :class="[isLegal?'active':'']">法人</div>
                                    <div class="option-navs-item" @click="isLegal = false" :class="[isLegal?'':'active']">不是法人</div>
                                </div>
                                <div class="clearfix option-float" v-if="!isLegal">
                                    <div class="option-fleft" style="float: none;margin: 0 auto;padding: 0;width: 350px">
                                        <Form :model="chargeForm" :label-width="100">
                                            <FormItem label="经办人姓名">
                                                <Input v-model="chargeForm.inputName" placeholder="请输入经办人姓名"></Input>
                                            </FormItem>
                                            <FormItem label="经办人证件号">
                                                <Input v-model="chargeForm.inputNum" placeholder="请输入经办人证件号"></Input>
                                            </FormItem>
                                            <FormItem label="经办人手机号">
                                                <Input v-model="chargeForm.inputPhone" placeholder="请输入经办人手机号"></Input>
                                            </FormItem>
                                            <FormItem label="短信验证码">
                                                <Input v-model="chargeForm.inputCode" placeholder="请输入短信验证码"></Input>
                                                <div class="optiongetcode">获取验证码</div>
                                            </FormItem>

                                        </Form>
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">客户姓名</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="请输入您的姓名"></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证号码</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder=""></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证有效日期</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="日期选择"></div>-->
                                        <!--                                        </div>-->
                                    </div>
                                </div>
                                <div class="optionbtnwrap">
                                    <div class="option-errtips" v-if="errtipshow">输入错误</div>
                                    <button type="button" class="option-next" @click="toStepTwo" style="width: 200px;">下一步</button>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-qrcode" @click="toStepThree">
                                    <img src="@/assets/images/u66.jpg" alt="" style="width: 500px;height: 280px;">
<!--                                    <div>请用微信扫描二维码进行人脸认证</div>-->
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-qrcode" @click="toStepFour">
                                    <img src="@/assets/images/u90.png" alt="">
                                    <div>请用微信扫描二维码进行人脸认证</div>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-success">
                                    <img src="@/assets/images/u1009.png" alt="" class="option-success-img">
                                    <div class="option-success-words">恭喜你，授权成功</div>
                                    <div class="option-success-tips">点击下方按钮，或 <span>{{routerTime}}</span> 秒后自动返回</div>
                                    <div class="option-success-btn">
                                        <router-link tag="button" :to="{name:'Ordersign'}" type="button">前往签署合同</router-link>
                                    </div>
                                </div>
                            </swiper-slide>
                            <!--                        <swiper-slide v-for="(item,index) in bannerList" :key="index" class="swiper-no-swiping">-->
                            <!--                            ssssss{{item}}-->
                            <!--                        </swiper-slide>-->
                            <!-- Optional controls -->
                            <!--                        <div class="swiper-pagination" slot="pagination"></div>-->
                        </swiper>
                    </div>
                    <div class="option-ft">

                    </div>
                </div>
            </div>
        </div>
        <pageFooter/>
    </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'
    var json = require('@/lib/cncity/provinces.json');
    import {mapMutations} from 'vuex'

    let routerInterval = null;
    export default {
        name: 'ukeypage',
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                isLegal:true,
                swiperOption: {
                    autoplay: false,
                    loop: false,
                    noSwiping: true,
                    // pagination: '.swiper-pagination'
                },
                bannerList: [1, 2, 3, 4, 5],
                routerTime:5,
                stepActive: 1,
                errtipshow:false,
                chargeForm: {
                    inputName: '',
                    inputNum:'',
                    inputPhone: '',
                    inputCode: '',
                }
            }
        },
        created() {

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },

        mounted() {

        },
        beforeDestroy() {
            clearInterval(routerInterval)
        },
        methods: {
            toStepTwo() {
                this.swiper.slideTo(1, 1000, false)
                this.stepActive = 2
            },
            toStepThree() {
                this.swiper.slideTo(2, 1000, false)
                this.stepActive = 3

            },
            toStepFour(){
                this.swiper.slideTo(3, 1000, false)
                this.stepActive = 4
                // routerInterval = setInterval(() => {
                //     if (this.routerTime > 0) {
                //         this.routerTime = this.routerTime - 1;
                //     } else {
                //         clearInterval(timeInterval)
                //         this.$router.push({
                //             name:'Ordersign'
                //         })
                //     }
                // }, 1000)
            },
        }
    }
</script>

<style scoped lang="scss">

</style>
